<!-- 登录（普通登录\注册） -->
<template>
	<view class="login-content">
		<view class="login-body">
			<view class="tabs-box">
				<u-tabs :list="list" :is-scroll="false" font-size="42" bar-width="0"
					:active-item-style="{fontSize:'48rpx',fontWeight:0}" active-color="#000" :current="current"
					@change="change"></u-tabs>
			</view>
			<!-- 密码登录 -->
			<view v-show="current == 0 && loginType == 0">
				<view class="login-text">
					<u-field v-model="loginForm.phone" label=" " type="phone" icon="phone" label-width="0"
						placeholder="请输入手机号">
					</u-field>
					<view style="height: 50rpx;width: 100%;"></view>
					<u-field v-model="loginForm.password" label=" " type="password" icon="lock" label-width="0"
						placeholder="请输入密码">
					</u-field>
				</view>
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox @change="checkboxChange" v-model="checked" shape="circle">
						<view class="tips">
							同意<text @click.stop="openPopup(1)">《用户协议》</text>和<text
								@click.stop="openPopup(2)">《隐私政策》</text>
						</view>
					</u-checkbox>
				</u-checkbox-group>
				<view class="function-box">
					<!-- <view @click="loginType = 1">验证码登录</view> -->
					<view @click="gotoForget">找回密码?</view>
				</view>
				<view class="submit-btn">
					<u-button shape="circle" :custom-style="customStyle" @click="login">立即登录</u-button>
				</view>
				<!-- <view class="tips">
					登录表示您已同意<text>《用户协议》</text>和<text>《隐私政策》</text>
				</view> -->
			</view>
			<u-popup v-model="show" mode="bottom" border-radius="14" height="800rpx">
				<view style="padding: 30rpx;">
					<view v-html="textDeatil"></view>
				</view>
			</u-popup>
			<!-- 验证码登录 -->
			<!-- 	<view v-show="current == 0 && loginType == 1">
				<view class="login-text">
					<u-field v-model="loginForm.phone" label=" " type="phone" icon="phone" label-width="0"
						placeholder="请输入手机号">
					</u-field>
					<view style="height: 50rpx;width: 100%;"></view>
					<u-field v-model="loginForm.sms_code" label=" " type="password" icon="lock" label-width="0"
						placeholder="请输入验证码">
						<view style="color: #4286F4;" slot="right" @tap="getCode">{{tips}}</view>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
					</u-field>
				</view>
				<view class="function-box">
					<view @click="loginType = 0">账号密码登录</view>
					<view>找回密码?</view>
				</view>
				<view class="submit-btn">
					<u-button shape="circle" :custom-style="customStyle">立即登录</u-button>
				</view>
				<view class="tips">
					登录表示您已同意<text>《用户协议》</text>和<text>《隐私政策》</text>
				</view>
			</view> -->
			<!-- 注册 -->
			<view v-show="current == 1">
				<view class="login-text">
					<u-field v-model="registerForm.phone" label=" " type="phone" icon="phone" label-width="0"
						placeholder="请输入手机号">
					</u-field>
					<view style="height: 50rpx;width: 100%;"></view>
					<u-field v-model="registerForm.sms_code" label=" " type="number" icon="lock" label-width="0"
						placeholder="请输入验证码">
						<view style="color: #4286F4;" slot="right" @tap="getCode">{{tips}}</view>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
					</u-field>
					<view style="height: 50rpx;width: 100%;"></view>
					<u-field v-model="registerForm.password" label=" " type="password" icon="lock" label-width="0"
						placeholder="请设置登录密码">
					</u-field>
					<view style="height: 50rpx;width: 100%;"></view>
					<u-field v-model="registerForm.password_confirmation" label=" " type="password" icon="lock"
						label-width="0" placeholder="请确认登录密码">
					</u-field>
				</view>
				<view class="function-box">
					<!-- <view @click="loginType = 1,current = 0">验证码登录</view> -->
					<view @click="gotoForget">找回密码?</view>
				</view>
				<view class="submit-btn">
					<u-button shape="circle" :custom-style="customStyle" @click='register'>立即注册</u-button>
				</view>
				<view class="tips">
					登录表示您已同意<text>《用户协议》</text>和<text>《隐私政策》</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		login,
		register,
		getCode,
		getUserInfo,
		getUserPolicy,
		getUserAgreement
	} from "@/api/login.js"
	export default {
		data() {
			return {
				textDeatil:'',
				show:false,
				checked: false,
				// 登录方式 0 密码登录 1 短信登录
				loginType: 0,
				// 验证码参数
				tips: '',
				seconds: 60,
				// 按钮样式
				customStyle: {
					color: '#fff',
					background: "#4286F4"
				},
				// tabs集合
				list: [{
					name: '登录'
				}, {
					name: '注册'
				}],
				// tabs选中值
				current: 0,
				// 注册表单
				registerForm: {
					phone: '',
					sms_code: '',
					password: '',
					password_confirmation: ''
				},
				// 登录表单
				loginForm: {
					sms_code: '',
					phone: '',
					password: ''
				}
			}
		},
		methods: {
			openPopup(type){
				this.show = true
				if(type == 1){
					this.getUserAgreement()
				}else{
					this.getUserPolicy()
				}
			},
			getUserAgreement(){
				getUserAgreement().then(res=>{
					console.log(res,'用户协议');
					this.textDeatil = res.data.user_agreement
				})
			},
			getUserPolicy(){
				getUserPolicy().then(res=>{
					console.log(res,'政策');
					this.textDeatil = res.data.privacy_policy
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
				this.checked = e.value
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 注册
			register() {
				if (this.registerForm.phone == '') {
					this.$u.toast('请输入手机号');
					return
				}
				if (this.registerForm.sms_code == '') {
					this.$u.toast('请输入验证码');
					return
				}
				if (this.registerForm.password == '') {
					this.$u.toast('请输入登录密码');
					return
				}
				if (this.registerForm.password != this.registerForm.password_confirmation) {
					this.$u.toast('两次密码不相同');
					return
				}
				register(this.registerForm).then(res => {
					this.$u.toast('注册成功');
					setTimeout(() => {
						this.current = 0
					}, 1000)
				})
			},
			// 忘记密码
			gotoForget() {
				uni.navigateTo({
					url: '/pages/login/forgetPwd'
				})
			},
			// 登录
			login() {
				let _self = this
				if (_self.loginForm.phone == '') {
					_self.$u.toast('请输入手机号');
					return
				}
				if (_self.loginForm.password == '') {
					_self.$u.toast('请输入登录密码');
					return
				}
				if (!_self.checked) {
					_self.$u.toast('请同意用户协议');
					return
				}
				login(_self.loginForm).then(res => {
					let token = res.data.token_type + ' ' + res.data.access_token
					uni.setStorageSync('App-Token', token)
					uni.setStorageSync('isLogin', true)
					uni.showToast({
						title: "登录成功！",
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						_self.getUserInfo()
					}, 1001)
				})

			},
			// 获取用户信息
			getUserInfo() {
				getUserInfo().then(res => {
					uni.setStorageSync('userInfo', res.data)
					uni.reLaunch({
						url: '/pages/index/index'
					})
				})
			},
			// 切换tabs
			change(index) {
				this.current = index;
			},
			// 验证码改变
			codeChange(text) {
				this.tips = text;
			},

			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let queryForm = {
						phone: '',
						use_type: ''
					}
					// 注册时传入的值
					if (this.current == 1) {
						queryForm.phone = this.registerForm.phone
						queryForm.use_type = 1
					}

					getCode(queryForm).then(res => {
						uni.hideLoading();
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})

				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {},
			start() {}
		}
	}
</script>

<style lang="scss" scoped>
	.login-content {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	.login-body {
		width: 90%;
		margin: 0 auto;
		height: 850rpx;

		.tabs-box {
			width: 50%;
			margin-bottom: 50rpx;
		}

		.function-box {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			color: #666666;
			font-size: 24rpx;
		}

		.submit-btn {
			margin-top: 150rpx;
		}

		.tips {
			// margin-top: 60rpx;
			letter-spacing: 1rpx;
			color: #999999;
			font-size: 24rpx;

			text {
				color: #4286F4;
			}
		}
	}
</style>